<template>
    <div class="display-card">
        <el-table :data="computedData" size="small" :max-height="400" @row-click="rowClick">
            <el-table-column prop="event_num" label="事件编号"></el-table-column>
            <el-table-column prop="name" label="类型"></el-table-column>
            <el-table-column label="操作" fixed="right">
                <el-button size="small" type="primary" link>详情</el-button>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { computed, inject, onBeforeUnmount } from 'vue'
import { PointLayer } from '@antv/l7'

const { scene, map } = inject('$scene_map')
let markLayer = null

const props = defineProps({
    tableData: {
        type: Array,
    },
})

const computedData = computed(() => {
    return props.tableData.map((row) => {
        const {
            geometry,
            properties: { event_num, name },
        } = row
        return {
            geometry,
            event_num,
            name,
        }
    })
})

function rowClick(row) {
    // console.log(row)
    markLayer && scene.removeLayer(markLayer)
    // 1. 根据坐标绘制雷达点
    const data = {
        type: 'FeatureCollection',
        features: [
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: row.geometry.coordinates,
                },
            },
        ],
    }
    markLayer = new PointLayer()
        .source(data)
        .shape('radar')
        .size(20)
        .color('#f00')
        .animate(true)
    scene.addLayer(markLayer)

    // 2. 根据坐标飞行(切换视角)
    map.flyTo({
        center: row.geometry.coordinates,
        zoom: 15,
        speed: 1,
        pitch: 30,
    })
}
onBeforeUnmount(() => {
    markLayer && scene.removeLayer(markLayer)
})
</script>

<style scoped>
.display-card {
    position: fixed;
    bottom: 80px;
    background: #53697670;
    border-radius: 4px;
    box-shadow: 0 0 5px 3px #333;
}

.eleCeil {
    background: transparent;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:deep(.el-table) {
    background-color: transparent;
}

:deep(.el-table tr) {
    background-color: transparent;
    color: #fff;
    cursor: pointer;
}

:deep(.el-table tr:hover) {
    background-color: rgba(0, 0, 0, 0.5);
}

:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
    background-color: transparent;
}

:deep(.el-table th.el-table__cell) {
    background-color: transparent;
}

:deep(.el-table td.el-table__cell) {
    border-bottom: none;
}

:deep(.el-table__inner-wrapper::before) {
    height: 0;
}

:deep(.el-table.is-scrolling-right th.el-table-fixed-column--right) {
    background-color: transparent;
}

:deep(.el-table.is-scrolling-none th.el-table-fixed-column--right) {
    background-color: transparent;
}
</style>